<template>
  <div class="list">
    <div v-if="activeData.status!=1">
      抱歉暂无数据，等会来看
    </div>
    <div v-if="activeData.status==1&&activeData.data.reset">
          <article v-for="(item,index) in activeData.data.reset" :class="{fadeInRight:index%2==0&&cssLoock,fadeInLeft:index%2!=0&&cssLoock}" :key="item.id" class="article_exp">
            <nuxt-link :to="`/details/${item._id}`">
              <p class="article_exp_img"><img :src="`${staticImg}${parseInt(Math.random()*10+1)}.jpg`" alt="" title=""></p>
              <header class="article_exp_header">
                <h2><span class="article_triggle">{{item.formClass}}<i></i></span>{{item.formTitle}}</h2>
              </header>
              <p class="article_exp_meta">
                <time class="article_exp_time"><i class="fa fa-clock-o"></i>{{new Date(item.date).format('yyyy-MM-dd')}}</time>
                <span class="article_exp_pv"><i class="fa fa-eye"></i> 阅读({{item.readNumber}})</span>
                <span class="article_exp_cmt"><i class="fa fa-comments-o"></i> 评论({{item.comment}})</span>
              </p>
              <div class="article_exp_des">{{item.formAbout}}
              </div>
            </nuxt-link>
          </article>
    </div>
    <div v-else>
      <dl class="noComment">
          <dt>〒_〒</dt>
          <dd>暂无数据，理论上来说是不会出现这个提示的</dd>
        </dl>
    </div>
  </div>
</template>
<script>
export default {
  props:{
    activeData: {
      type: Object,
      default: function() {
        return {
          status: 0,
          data: []
        };
      }
    }
  },
  data(){
    return {
      staticImg:'/randoms/',
      cssLoock:false
    }
  },
  mounted(){
    setTimeout((_this)=>{
      _this.cssLoock = true;
    },500,this)
  }
}
</script>
<style lang="less">
.list{min-height: 500px;}
.article_exp{padding:20px 20px 20px 25px;overflow:hidden;background-color:#fff;border-left:4px solid #eee;margin-left:-4px;margin-bottom:10px;transition:all 1s}
// .article_exp:nth-child(odd){transform:translateX(-100%)}
// .article_exp:nth-child(even){transform:translateX(100%)}
.article_exp.fadeInRight{transform:translateX(0)}
.article_exp.fadeInLeft{transform:translateX(0)}
.article_exp:hover{border-left-color:#00a2ca;background-color:#F8FCFE}
.article_exp_img{float:left;padding-right:15px;max-width:270px;min-width:20%}
.article_exp_img img{width:100%}
.article_exp_header{margin-bottom:10px}
.article_exp_header h2{font-size:18px;line-height:24px;margin:0;font-weight:700}
.article_exp_header h2 .fa{color:#00a2ca;font-weight:400;font-size:15px}
.article_exp_header .article_triggle{color:#fff;background-color:#d9534f;padding:1px 6px;font-size:12px;display:inline-block;position:relative;top:-2px;margin-right:6px;line-height:20px;opacity:.85;filter:alpha(opacity=85);font-weight:400}
.article_exp_header .article_triggle:hover{opacity:1;filter:alpha(opacity=100)}
.article_exp_header .article_triggle i{position:absolute;top:50%;margin-top:-4px;right:-4px;display:inline-block;width:0;height:0;vertical-align:middle;border-left:4px solid #d9534f;border-top:4px solid transparent;border-bottom:4px solid transparent}
.article_exp_meta{color:#999;font-size:12px;margin-bottom:10px}
.article_exp_meta a{color:#999}
.article_exp_meta a:hover{color:#00a2ca}
.article_exp_cmt,.article_exp_pv,.article_exp_time{display:inline-block;margin:0 8px 0 0}
.article_exp_cmt{text-decoration:underline;color:#999}
.article_exp_cmt:hover{text-decoration:underline;color:#00a2ca}
.article_exp_des{font-size:14px;color:#777;word-wrap:break-word;line-height:24px}
.article_exp_des img{display:none}
.readmore{margin-top:10px}
.noComment{text-align:center;padding:15px 0 20px 0}
.noComment dt{font-size:36px;line-height:55px;color:#999;font-weight:200}
.noComment dd{font-size:14px;font-weight:200;color:#999;padding:10px 0;border-bottom:none}
.paging{overflow:hidden;text-align:center;font-size:0;padding:20px 0}
.paging a{display:inline-block;margin:0 5px;font-size:14px;background:#58b0e0;color:#fff;padding:10px 15px}
.paging a.current{background:#3f8fbb}
.paging a:hover{background:#3f8fbb}
</style>
